<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "emp";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT gender, COUNT(*) as count FROM gender WHERE gender IN ('male', 'female') GROUP BY gender";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            'name' => $row['gender'] === 'male' ? 'Male' : 'Female',
            'value' => intval($row['count'])
        );
    }
} else {
    echo "没有数据";
}
$conn->close();

// 将数据转换为JSON格式
$jsonData = json_encode($data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>男女人数比例饼图</title>
    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
    var data = <?php echo $jsonData; ?>;

    // 初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 配置图表选项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '性别分布',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>